<template>
  <div>
    <table-custom
      ref="tableCustomRef"
      pageType="eslogis_shipping_carrier"
      :api="getShippingOrderCarrierList"
      :option="option"
      :searchInfo="searchInfo"
      @selection-change="handleSelectionChange"
    >
      <!-- 左侧搜索 -->
      <!-- <template #tableTitle>
        <search-com
          :shippingType="dicData.tps_shipping_type"
          :statusArr="dicData.tps_shipping_order_status"
          @handle-search="onSearch"
        />
      </template> -->

      <!-- 右侧按钮 -->
      <template #toolbar>
        <!-- <a-button type="primary">装车计划</a-button> -->
        <a-button type="primary" @click="mergeSign">合并报价</a-button>
        <a-button type="primary" @click="mergeScheduling">合并调度</a-button>
        <!-- <a-button :loading="downloading" type="primary" @click="handleExport">导出</a-button> -->
        <!-- <export-btn
          :api="exportExcelByCarrier"
          :params="{ ...exportParams, ...searchInfo }"
          :fileName="`${deliveryType == '1' ? '送货' : '退货'}列表.xlsx`"
        /> -->
      </template>

      <!-- 操作栏插槽 -->
      <template #menuBtn="{ record }">
        <btn-com :record="record" @click-event="clickEvent" />
        <a-button type="link" @click="openDrawer(true, record)">详情</a-button>
      </template>

      <!-- 每列数据插槽 -->
      <!-- <template #bodyCell="{ column, record }">
      </template> -->
    </table-custom>

    <!-- 派单弹窗 -->
    <DetailModal @register="register" />

    <!-- 公用组件 schedule-司机调度 scheduleUpdate-司机变更 quote-报价 -->
    <FlowForm @register="registerFlowForm" @on-search="onSearch" />
  </div>
</template>

<script lang="ts" setup>
  import TableCustom from '@/components/TableCustom/TableCustom.vue';
  // import { usePermission } from '@/hooks/web/usePermission';
  // import { useMessage } from '@/hooks/web/useMessage';
  import { ref, nextTick } from 'vue';
  import BtnCom from './components/BtnCom.vue';
  // import { downloadFile } from '@/utils/common';
  import { getShippingOrderCarrierList, exportExcelByCarrier } from '@/api/shippingOrder';
  // import { useDict, useDictValue } from '@/hooks/dict/useDictHook';
  import DetailModal from '@/views/shipper/waybillManagement/components/DetailModal.vue';
  import { useDrawer } from '@/components/Drawer';
  import { useModal } from '@/components/Modal';
  import FlowForm from '@/components/flowForm/index.vue';
  import { message } from 'ant-design-vue';
  import { getFormConfig } from './searchSchemas';

  const [register, { openDrawer }] = useDrawer();

  const [registerFlowForm, { openModal: openFlowForm }] = useModal();

  defineOptions({ name: 'WaybillManagement' });

  const tableCustomRef = ref(null);
  const selectLists: any = ref([]);
  const searchInfo = ref({});
  const deliveryType = ref('1'); // 运单类型：1-送货，2-退货
  const exportParams: any = ref({});
  // 获取外部传入的订单类型
  const props = defineProps({
    orderType: {
      type: String,
      default: '1',
    },
  });
  if (props.orderType) deliveryType.value = props.orderType;
  searchInfo.value = {
    deliveryType: deliveryType.value,
  };

  console.log('searchInfo', searchInfo.value);
  // 配置表格数据
  const option = ref({
    // 表格可选择
    rowSelection: {
      type: 'checkbox',
    },
    useSearchForm: true,
    formConfig: {
      ...getFormConfig(1),
      defaultValue: {},
    },
    exportConfig: {
      api: exportExcelByCarrier,
    },
  });

  // 监听勾选项选项变化
  function handleSelectionChange({ selectedRowKeys, selectedRows }) {
    console.log('selectedRowKeys', selectedRowKeys);
    // console.log('selectedRows', selectedRows);
    exportParams.value.ids = selectedRows.map((item) => item.id);
  }

  const mergeSign = () => {
    const comRef: any = tableCustomRef.value;
    const selectLists = comRef.getSelectedRows();
    if (selectLists && selectLists.length > 1) {
      const status = selectLists.find((item) => {
        return ![0, 3].includes(item.quoteStatus);
      });
      if (status) {
        message.error('状态不能为报价完成!');
        return;
      }
      // 合并报价
      openFlowForm(true, {
        fromType: 'quote',
        selectLists,
      });
    }
  };

  const mergeScheduling = () => {
    const comRef: any = tableCustomRef.value;
    const selectLists = comRef.getSelectedRows();
    if (selectLists && selectLists.length > 1) {
      console.log('🚀 ~ mergeScheduling ~ selectLists:', selectLists);
      const status = selectLists.find((item) => {
        return ![10, 12].includes(item.status);
      });
      if (status) {
        message.error('状态不能为报价完成!');
        return;
      }

      // 司机合并调度
      openFlowForm(true, {
        fromType: 'schedule',
        selectLists,
      });
    }
  };

  const clickEvent = (type, record) => {
    console.log('🚀 ~ clickEvent ~ type, record:', type, record);
    openFlowForm(true, {
      fromType: type,
      record,
    });
  };

  // 搜索
  function onSearch(params: any) {
    searchInfo.value = {
      deliveryType: deliveryType.value,
      ...params,
    };

    // 清空已选项
    selectLists.value = [];
    // 获取表格组件实例
    const comRef: any = tableCustomRef.value;
    nextTick(() => {
      comRef.handleSearch({ searchInfo: { ...searchInfo.value } });
    });
  }
</script>

<style lang="less" scoped>
  .text-item {
    display: flex;
    justify-content: flex-start;
    margin-top: 5px;
    margin-bottom: 4px;
    text-align: left;
  }
</style>
